// 使用详情

<template>
    <f7-page class="detail">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="arrow_back" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>使用详情</f7-nav-title>
            <f7-nav-right></f7-nav-right>
        </f7-navbar>
        <div class="header-bg"></div>
        <div class="content-box">
            <img
                :src="
                    require(`../../../../assets/img/qzjx/${
                        property.equipmentType || 'empty'
                    }.png`)
                "
                alt=""
                class="left-box"
            />
            <div class="right-box">
                <div class="title-box">
                    <h3>{{ property.propertyCode || '--' }}</h3>
                </div>
                <span class="tag tag-fill">{{
                    property.equipmentType | DictItem(equipmentTypes)
                }}</span>
                <p>
                    {{ group.beginTime | date('yyyy-MM-dd') }} ——
                    {{ group.endTime | date('yyyy-MM-dd') || '至今' }}
                </p>
                <p>{{ group.engineeName || '--' }}</p>
            </div>
        </div>
        <div class="qm-entry">
            <div
                v-for="(item, index) in menu"
                :key="index"
                class="qm-entry-list"
            >
                <qm-entry-ext
                    :data="item"
                    iconWidth="32"
                    fontSize="24"
                    @changeItem="goDo(item)"
                ></qm-entry-ext>
            </div>
        </div>
        <div class="qzjx-card">
            <van-steps direction="vertical" :active="activeStep">
                <van-step
                    v-for="(item, index) in useNodeList"
                    :key="index"
                    @click.native="
                        item.status == 1 || item.status == 2
                            ? goDetail(item)
                            : ''
                    "
                >
                    <template v-slot:inactive-icon>
                        <van-icon
                            name="success"
                            class="is-success"
                            v-if="item.status === 2"
                        />
                        <div class="is-waiting" v-if="item.status === 0"></div>
                        <div class="is-process" v-if="item.status === 1"></div>
                    </template>
                    <template v-slot:active-icon>
                        <div class="is-process"></div>
                    </template>
                    <div class="step-box">
                        <span>{{ item.nodeName }} </span>
                        <span
                            >{{ item.desc
                            }}<van-icon
                                v-if="item.status == 1 || item.status == 2"
                                name="arrow"
                        /></span>
                    </div>
                </van-step>
            </van-steps>
        </div>
    </f7-page>
</template>

<script>
import Config from '@/libs/config'
import Controller from '@/libs/framework/controller'
export default class sInsp extends Controller {
    onBeforeInit() {
        this.urls = {
            model: '/app/equipment/eqmProperty/getPropertyUseDetail',
        }
    }
    onInit() {}
    onBeforeQuery(type, conditions, params) {
        this.vm.$f7.preloader.show()
    }
    onAfterQuery(type, isSuccess, result) {
        if (!isSuccess) {
            setTimeout(() => {
                this.vm.$f7.preloader.hide()
                this.vm.$f7.dialog.alert('数据加载失败，请刷新页面重试')
            }, 3000)
        }
        this.$data.useNodeList = result.parameters.useNodeList || []
        this.$data.equipmentTypes = result.parameters.equipmentTypes || []
        this.$data.group = result.parameters.group || {}
        this.$data.property = result.parameters.property || {}
        this.$data.equeId = result.parameters.equeId || ''
        this.vm.$f7.preloader.hide()
        // 如果没有黑匣子id和视频 则不展示实时监控按钮
        if(!result.parameters.equeId && !(result.parameters.videos && result.parameters.videos.length)){
            this.context.menu=this.context.menu.filter(item=>item.title!='实时监控')
        }
        this.vm.getStep()
        return result
    }

    mixin() {
        return {
            props: {},
            data() {
                return {
                    equeId:'', // 黑匣子id
                    group: {},
                    useNodeList: [],
                    equipmentTypes: [],
                    activeStep: 0,
                    property: {},
                    menu: [
                        {
                            href: '/business/qzjx/hoisting/index',
                            image: require('@/assets/img/qzjx/detail-icon1.png'),
                            title: '实时监控',
                        },
                        {
                            href: '/business/qzjx/equipment/monitorAlarm',
                            image: require('@/assets/img/qzjx/detail-icon2.png'),
                            title: '监测报警',
                        },
                        {
                            href: '/business/qzjx/equipment/useRecord',
                            image: require('@/assets/img/qzjx/detail-icon3.png'),
                            title: '使用记录',
                        },
                        {
                            href: '/business/qzjx/deviceMonitor/list',
                            image: require('@/assets/img/qzjx/sbjc.svg'),
                            title: '设备检测',
                        },
                    ],
                }
            },
            computed: {},
            methods: {
                goDo(data) {
                    // if (
                    //     this.property.equipmentType == 'TSQZJ' ||
                    //     this.property.equipmentType == 'SGSJJ' 
                    // ) {
                    //     this.$f7router.navigate(
                    //         data.href +
                    //             `?propertyId=${this.property.propertyId}&type=${this.property.equipmentType}&propertyCode=${this.property.propertyCode}&equeId=${this.equeId}&groupId=${this.group.groupId}`
                    //     )
                    // } else {
                    //     this.$toast('该设备类型不支持该功能！')
                    // }
                    if (
                        (this.property.equipmentType == 'QSQZJ' ||this.property.equipmentType == 'MSQZJ' ) 
                        && (data.title=='实时监控'||data.title=="监测报警")
                    ) {
                        this.$toast('该设备类型不支持该功能！')
                    } else {
                        this.$f7router.navigate(
                            data.href +
                                `?propertyId=${this.property.propertyId}&type=${this.property.equipmentType}&propertyCode=${this.property.propertyCode}&equeId=${this.equeId}&groupId=${this.group.groupId}`
                        )
                        
                    }
                },
                // 详情
                goDetail(item) {
                    let url = ''
                    switch (item.nodeType) {
                        case 'INSTALL_NOTIFY': // 设备安装
                            url = '/business/qzjx/installManagement/detail'
                            break
                        case 'EQM_USE': // 使用登记
                            url = '/business/qzjx/eqmUse/list'
                            break
                        case 'UP_NOTIFY': // 顶升加节
                            url = '/business/qzjx/roofUp/index'
                            break
                        case 'EQM_CHECK': // 设备检测
                            url = '/business/qzjx/deviceMonitor/list'
                            break
                        case 'EQM_REPAIR': // 维护保养
                            url = '/business/qzjx/maintenance/list'
                            break
                        case 'DIS_NOTIFY': // 设备拆卸
                            url = '/business/qzjx/disassembly/detail'
                            break
                        default:
                            break
                    }
                    if (item.nodeType == 'EQM_REPAIR') {
                        window.localStorage.setItem('maintenanceIndex', 2)
                    }
                    if (
                        item.nodeType == 'INSTALL_NOTIFY' ||
                        item.nodeType == 'DIS_NOTIFY' || 
                        item.nodeType == 'UP_NOTIFY'
                    ) {
                        this.$f7router.navigate(
                            url + `?notifyCaseId=${item.caseId}&keyword=${this.property.propertyCode}`
                        )
                    } else {
                        this.$f7router.navigate(
                            url + `?propertyId=${this.property.propertyId}`
                        )
                    }
                },
                getStep() {
                    if (this.useNodeList.length > 0) {
                        for (let i = 0; i < this.useNodeList.length; i++) {
                            const element = this.useNodeList[i]
                            if (element.status == 0) {
                                break
                            } else if (element.status == 1) {
                                this.activeStep = i
                            } else {
                                this.activeStep = i + 1
                            }
                        }
                    }
                },
            },
            created() {},
            mounted() {
                window.localStorage.setItem('maintenanceIndex', 1)
            },
            watch: {},
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../assets/css/commonPage.less');
.detail{
    @{deep}.page-content{
        padding: 0;
        background: linear-gradient(180deg, #FFFFFF 0%, #F1F3F7 100%);
    }
    @{deep}.navbar .navbar-bg{
        background-color: transparent;
    }
    .header-bg{
        width: 100%;
        height: 223px;
        background: url("../../../../assets/img/qzjx/detail-bg.png") no-repeat;
        background-size: 100% 100%;
    }
    .content-box{
        background: linear-gradient(196deg, #EFF6FF 0%, #FFFFFF 100%);
        box-shadow: 0px 3px 8px 0px rgba(165,201,255,0.1);
        border: 1px solid #FFFFFF;
        margin: -100px 15px 15px 15px;
    }
    .qzjx-card{
        margin: 0 15px 15px;
        box-shadow: 0px 3px 8px 0px rgba(165,201,255,0.1);
        border: 1px solid #FFFFFF;
        padding: 0;
        .van-steps__items .van-hairline:first-child{
            background: linear-gradient(180deg, #F3F8FF 0%, #FFFFFF 100%);
        }
    }
    .van-steps .van-step--vertical::before{
        background: transparent !important;
        border: none !important;
    }
}
@{deep}.qm-entry {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-row-gap: calc(32px * var(--ratio));
    background: #fff;
    padding: 15px 0;
    box-shadow: 0 3px 8px 0 rgba(165, 201, 255, 0.1);
    border-radius: 8px;
    margin: 0 15px 15px;
    .entry .entry-title {
        margin-top: calc(8px * var(--ratio));
    }
    .entry .link .entry-img {
        width: 32px;
        height: 32px;
    }
}
</style>
